<style scoped>
.container {
	padding: 16px;
	border: 1px solid #efefef;
}

.el-select .el-select--small {
	display: block !important;
}
</style>

<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 主体区 -->
		<div class="container">
			<!-- 表单区 -->
			<div class="form-data-box">
				<el-form
					:model="formBean"
					:rules="validateRules"
					ref="form1"
					label-width="100px"
					class="ruleForm"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="卡商名称" prop="spName">
								<el-input :readonly="readOnly" v-model="formBean.spName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="卡商代码" prop="spNo">
								<el-input :readonly="readOnly" v-model="formBean.spNo"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="运营商" prop="isp">
								<el-select :disabled="readOnly" v-model="formBean.isp">
									<el-option v-for="item in dicts.isp" :key="item.code" :label="item.name" :value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<!-- 表单区END -->
			<!-- 按钮操作区 -->
			<span slot="footer" class="form-btn-box">
				<el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button>
				<el-button
					v-if="!readOnly"
					type="primary"
					@click="submitForm('form1')"
					v-loading.fullscreen.lock="fullscreenLoading"
				>确 定</el-button>
				<el-button @click="cnacelForm('form1')">取 消</el-button>
			</span>
			<!-- 按钮操作区END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>
<script>
export default {
	data() {
		var validateSpNo = (rule, value, callback) =>{
			var zg =  /^[0-9a-zA-Z]{1,5}$/;  
			if (!zg.test(value))  {  
				callback(new Error('须为 1 ~ 5 个字符长度的数字或字母'));
			} else if(!value){  
				callback(new Error('请输入卡商代码'));
			}else{
				callback();
			}
		};
		return {
			// 提交表单的loading设置标识
			fullscreenLoading: false,
			firstLoadedData: "{}",
			// 新增用户表单信息
			formBean: {
				spName: "", //卡商名称
				spNo: "", //卡商代码
				isp: "", //运营商
			},
			// 表单校验规则
			validateRules: {
				spName: [
					{ required: true, message: "请输入卡商名称", trigger: "blur" },
					{ min: 1, max: 50, message: '长度须符合 1 ~ 100 个字符', trigger: 'blur' }
				],
				spNo: [
					{ required: true, validator: validateSpNo, trigger: "blur" }
				],
				isp: [{ required: true, message: "请选择运营商", trigger: "blur" }],
			},
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "",
			// 表单只读状态
			readOnly: false,
			readOnlyEdt: false,
			//字典集
			dicts: {},
			cascaders: {},
			cascaderSelected: {},
		}
	},
	props: {
		sourceData: {
			required: true
		}
	},
	// 进入页面加载数据
	mounted() {
		this.handleInitLoad();
	},
	methods: {

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initSelectOptoins();
			this.initFormData();
		},

		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("isp", null);
		},


		 /**
		 * 通用定义:下拉字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			let url = "/rps/dictionary/";
			this.$axios
			.get(url, {
				params: {
					type: dictKind
				},
				headers:{
					operator: this.$util.getLoginer().userid,
					withCredentials: true
				}
			})
			.then(res => {
				let data = res.data;
				if (data.success) {
					this.$set(this.dicts, dictKind, data.data.list);
				} else {
					console.log(data.message);
					// this.$error( "查询失败" + data.message );
				}
			})
			.catch(err => {
				console.log(err);
			});
		},

		/**
		 * 取消返回
		 * @augments formName 表单名称
		 */
		cnacelForm(formName) {
			this.$refs[formName].resetFields();
			this.$emit("cancel", this.cancelData);
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 *初始化加载表单数据
		 */
		initFormData() {
			this.selectedId = this.sourceData.seleid;
			this.actType = this.sourceData.actType;
			this.readOnlyEdt = true;
			if (this.actType == "view") {
				// 查看状态 标识表单只读
				this.readOnly = true;
			} else if (this.actType == "add") {
				this.readOnly = false;
				this.readOnlyEdt = false;
				//清空修改保存之后数据还存在的情况
				for (var key in this.formBean) {
					this.formBean[key] = "";
				}
			} else {
				this.readOnly = false;
			}
			var url = "/rps/sp/";
			if (this.actType != null && (this.actType == "upd" || this.actType == "view")) {
				url += this.selectedId + "/";
				this.$axios
					.get(url, {
						params: {},
						headers:{
							operator: this.$util.getLoginer().userid,
							withCredentials: true
						}
					})
					.then(res => {
						let data = res.data;
						if (data.success) {
							this.formBean = data.data;
							if(null == this.formBean.ispName || '' == this.formBean.ispName) this.formBean.isp = '';
							this.firstLoadedData = JSON.stringify(this.formBean); 
						} else {
							this.$error( data.message );
						}
					})
					.catch( err => {});
			}
		},

		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			//
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 表单校验成功
					if(this.actType == "upd"){
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						var url = "/rps/sp/" + this.selectedId + "/";
						this.$axios
							.put(url, this.formBean, {
								headers:{
									operator: this.$util.getLoginer().userid,
									withCredentials: true
								}
							})
							.then(res => {
								let data = res.data;
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (data.success) {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									this.$emit("ok", {});
								} else {
									this.$error(data.message);
								}
							})
							.catch(err => {
								this.fullscreenLoading = false;
							});
					}else if(this.actType == "add" ){
						var url = "/rps/sp/";
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						this.$axios
							.post(url, this.formBean, {
								headers:{
									operator: this.$util.getLoginer().userid,
									withCredentials: true
								}
							})
							.then(res => {
								let data = res.data;
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (data.success) {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									this.$emit("ok", {});
								} else {
									this.$error(data.message);
								}
							})
							.catch(err => {
								this.fullscreenLoading = false;
							});
					}
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		}
	}
};
</script>
